<template>
  <div id="app">
    <!-- <button>首页</button>
    <button>关于</button> -->
    <p>我是App组件</p>
<!-- router-link是vue-router自动注册的组件，是全局组件  最终会被渲染成a标签-->
<!-- router-link的tag属性  tag = "button"会渲染成button标签 -->
<!-- 增加replace来回点不能返回   其原因是内部使用了replaceStats属性-->
   <!-- <router-link to="/home" tag = "button" replace active-class="active">首页</router-link>
   <router-link to="/about" tag = "li" replace active-class="active">关于</router-link> -->

   <!-- <router-link to="/home" tag = "button" replace >首页</router-link>
   <router-link to="/about" tag = "li" replace >关于</router-link> -->

   <!-- <button @click="homeClick">首页</button>
   <button @click="aboutClick">关于</button>  -->

   <router-link to="/home">首页</router-link>
   <router-link to="/about">关于</router-link>
   <!-- <router-link :to="'/user/'+userId">用户</router-link> -->
   <!-- <router-link to="/profile">档案</router-link> -->
   <!-- UPL:协议://主机:端口/路径？查询 -->
   <!-- URL:scheme://host:port/path?query -->
   <!-- <router-link :to="{path:'/profile',query:{name:'why',age:'18',height:'1.88'}}">档案</router-link> -->
   <!--router-view  占位的作用，展示在哪里上面下面还是左边右边  与其他 页面同级的-->
  
   <button @click="userClick">用户</button>
   <button @click="profileClick">档案</button> 

<!--   exclude="Profile,User"  切记不要随便加空格，例如正则也不要随便加空格-->
  <keep-alive exclude="Profile,User">
    <router-view></router-view>
  </keep-alive>
   
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId:'lisi',
    }
  },
  methods:{
    homeClick() {
      // 通过代码的方式修改路由 vue-router
      // vue-router 给所有的组件都增加了$router属性
      // push可用箭头回退
      // this.$router.push("/home")
      // replace不能回退
      this.$router.replace("/home")
      console.log("homeClick")
    },
    aboutClick() {
      // this.$router.push("/about")
       this.$router.replace("/about")
      console.log("aboutClick")
    },
    userClick() {
      this.$router.push("/user/"+this.userId)
    },
    profileClick() {
       this.$router.push({
         path:"/profile",
         query:{
           name:'kobe',
           age:19,
           height:1.88
         }
       })
    }
  }
}
</script>

<style>
/* .router-link-active{
  color: red;
} */
.active{
   color: red;
}
</style>
